import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ListSubheader from '@material-ui/core/ListSubheader';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Collapse from '@material-ui/core/Collapse';
import SendIcon from '@material-ui/icons/Send';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';

const useStyles = makeStyles(theme => ({
    root: {
        width: '100%',
        backgroundColor: theme.palette.background.paper,
    },
    nested: {
        paddingLeft: theme.spacing(4),
    },
}));

function StyleNum(props){
    return (
        <span style={{color:'rgb(60, 154, 255)'}}>
            ({props.children})
        </span>
    )
    
}


function Device() {
    return (
        <div>
            <span>设备：</span>
            <span>总数<StyleNum>2244</StyleNum></span>
            <span> | </span>
            <span>在线<StyleNum>1800</StyleNum></span>
        </div>
    )
}
function Bind() {
    return (
        <div>
            <span>绑定：</span>
            <span>已绑定人数<StyleNum>4496</StyleNum></span>
            <span> | </span>
            <span>已解绑<StyleNum>300</StyleNum></span>
        </div>
    )
}
function Fats() {
    return (
        <div>
            <span>肥胖：</span>
            <span>极度肥胖<StyleNum>228</StyleNum>人</span>
            <span> | </span>
            <span>重度肥胖<StyleNum>296</StyleNum>人</span>
            <span> | </span>
            <span>中度肥胖<StyleNum>1367</StyleNum>人</span>
            <span> | </span>
            <span>较轻度肥胖<StyleNum>1789</StyleNum>人</span>
            <span> | </span>
            <span>正常<StyleNum>566</StyleNum>人</span>
            <span> | </span>
            <span>较轻<StyleNum>200</StyleNum>人</span>
        </div>
    )
}
function Male() {
    return (
        <div>
            <span>男：</span>
            <span><StyleNum>2029</StyleNum>人</span>
            <span style={{padding:'0 20px'}}> | </span>
            <span>25岁以下：<StyleNum>76</StyleNum>人</span>
            <span> | </span>
            <span>25岁以下：<StyleNum>869</StyleNum>人</span>
            <span> | </span>
            <span>35-45岁：<StyleNum>666</StyleNum>人</span>
            <span> | </span>
            <span>45-55岁：<StyleNum>207</StyleNum>人</span>
            <span> | </span>
            <span>55-65岁：<StyleNum>125</StyleNum>人</span>
            <span> | </span>
            <span>65岁以上：<StyleNum>86</StyleNum>人</span>
        </div>
    )
}
function FeMale() {
    return (
        <div>
            <span>女：</span>
            <span><StyleNum>2467</StyleNum>人</span>
            <span style={{padding:'0 20px'}}> | </span>
            <span>25岁以下：<StyleNum>89</StyleNum>人</span>
            <span> | </span>
            <span>25岁以下：<StyleNum>901</StyleNum>人</span>
            <span> | </span>
            <span>35-45岁：<StyleNum>898</StyleNum>人</span>
            <span> | </span>
            <span>45-55岁：<StyleNum>415</StyleNum>人</span>
            <span> | </span>
            <span>55-65岁：<StyleNum>89</StyleNum>人</span>
            <span> | </span>
            <span>65岁以上：<StyleNum>75</StyleNum>人</span>
        </div>
    )
}



export default function NestedList() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(true);

    function handleClick() {
        setOpen(!open);
    }

    return (
        <List
            component="nav"
            aria-labelledby="nested-list-subheader"
            subheader={
                <ListSubheader component="div" id="nested-list-subheader">
                    统计：
                </ListSubheader>
            }
            className={classes.root}
        >
            <ListItem button>
                <ListItemIcon>
                    <SendIcon />
                </ListItemIcon>
                <ListItemText primary={<Device />} />
            </ListItem>
            <ListItem button>
                <ListItemIcon>
                    <SendIcon />
                </ListItemIcon>
                <ListItemText primary={<Bind />} />
            </ListItem>
            <ListItem button>
                <ListItemIcon>
                    <SendIcon />
                </ListItemIcon>
                <ListItemText primary={<Fats />} />
            </ListItem>
            <ListItem button onClick={handleClick}>
                <ListItemIcon>
                    <SendIcon />
                </ListItemIcon>
                <ListItemText primary="男/女：" />
                {open ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                    <ListItem button className={classes.nested}>
                        <ListItemIcon>
                            <StarBorder />
                        </ListItemIcon>
                        <ListItemText primary={<Male />} />
                    </ListItem>
                    <ListItem button className={classes.nested}>
                        <ListItemIcon>
                            <StarBorder />
                        </ListItemIcon>
                        <ListItemText primary={<FeMale />} />
                    </ListItem>
                </List>
            </Collapse>
        </List>
    );
}
